<template>
	<div>
		
		<div class="breadcrumb">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>系统管理</el-breadcrumb-item>
				<el-breadcrumb-item>销售管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<el-card>
				<el-button style="margin-bottom: 10px;" class="btnprimary fontsize16" @click="showAdd">增加角色</el-button>
			<el-table :data="tableList" border stripe>
				<el-table-column label="角色名" prop="roleName"></el-table-column>
				<el-table-column label="最后更新时间" prop="updateTime" width="300px"></el-table-column>
				<el-table-column label="最后修改人" prop="createUserName"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click="showEdit(scope.row)" class="btnprimary btnsmall" size="mini">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<!-- 分页 -->
			<!-- <el-pagination
			  @size-change="handleSizeChange"
			  @current-change="handleCurrentChange"
			  :current-page="pageCount"
			  :page-size="pageSize"
			  background
			  layout="total, sizes, prev, pager, next, jumper"
			  :total="total">
			</el-pagination> -->
		</el-card>
		
		<el-dialog
		  title="添加"
		  :visible.sync="addDialogVisible"
		  width="50%">
			<el-form ref="addFormRef" :model="addForm" label-width="120px">
				<el-form-item label="角色姓名">
				  <el-input v-model="addForm.roleName"></el-input>
				</el-form-item>
				<el-form-item label="权限配置">
					<div v-for="(item,index) in menulist" style="margin-bottom: 10px;line-height: 45px;">
						<span style="margin-right: 10px;">{{item.name}}</span>
						<span style="margin-right: 10px;" v-if="item.children" v-for="(itemch,indexch) in item.children">
							<el-checkbox v-if="itemch" v-model="itemch.checked" :label="itemch.name" border></el-checkbox>
						</span>
					</div>
				</el-form-item> 
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button class="btnprimary" @click="addSub">确 定</el-button>
		  </span>
		</el-dialog>
		
		<el-dialog
		  title="修改"
		  :visible.sync="editDialogVisible"
		  width="50%">
			<el-form ref="editFormRef" :model="editForm" label-width="120px">
				<el-form-item label="角色姓名">
				  <el-input v-model="editForm.roleName"></el-input>
				</el-form-item>
				<el-form-item label="权限配置">
					<div v-for="(item,index) in menulist" style="margin-bottom: 10px;line-height: 45px;">
						<span style="margin-right: 10px;">{{item.name}}</span>
						<span style="margin-right: 10px;" v-if="item.children" v-for="(itemch,indexch) in item.children">
							<el-checkbox v-if="itemch" v-model="itemch.checked" :label="itemch.name" border></el-checkbox>
						</span>
					</div>
				</el-form-item> 
			</el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="editDialogVisible = false">取 消</el-button>
		    <el-button class="btnprimary" @click="editSub">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
			data(){
				return{
					tableList:[],
					pageCount:1,
					pageSize:20,
					total:0,
					addForm:{roleName:'',resIds:[]},
					addDialogVisible:false,
					editForm:{},
					editDialogVisible:false,
					disabled: false,
					menulist:[],
					editForm:{roleName:'',resIds:[]}
				}
			},
			created() {
				this.getTableList()
				this.getroleList()
			},
			methods:{
				getlistJson(list){
					let that = this
					var listJson = []
					return new Promise((resolve, reject) => {
						list.forEach((item,index)=>{
							if(item.level===1){
								that.$set(item,'children',[])
								listJson.push(item)
							}
						})
						resolve(listJson)
					})
				},
				async getroleList(){
					let that = this
					const loading = this.$loading({
					  lock: true,
					  text: 'Loading',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					const {data:res} = await this.$http.get('/sys/resource/list')
					console.log(res);
					var list = res.data
					var listJson = []
					listJson = await this.getlistJson(list)
					list.forEach((item,index)=>{
						that.$set(item,'checked',false)
						listJson.forEach((itemj,indexj)=>{
							if(item.pid === itemj.id && item.level===2){
								itemj.children.push(item)
							}
						})
					})
					this.menulist = listJson
					this.menulist.forEach((item,index)=>{
						if(item.children.length<1){
							console.log(item)
							item.children.push(item)
						}
					})
					console.log(this.menulist)
					setTimeout(() => {
					  loading.close();
					}, 500);
				},
				async getTableList(){
					const loading = this.$loading({
					  lock: true,
					  text: 'Loading',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					const {data:res} = await this.$http.get('/sys/role/list')
					setTimeout(() => {
					  loading.close();
					}, 500);
					console.log(res);
					if(res.code ==702){
						this.$router.push("/login");
						return this.$message.error('请登录')
					} 
					this.tableList = res.data
					// this.total = res.data.total
					
				},
				getsearchTableList(){
					this.pageCount = 1
					this.getTableList()
				},
				handleSizeChange(val) {
					// console.log(`每页 ${val} 条`);
					this.pageSize = val
					this.getTableList()
				},
				handleCurrentChange(val) {
					// console.log(`当前页: ${val}`);
					this.pageCount = val
					this.getTableList()
				},
				showAdd(){
					this.addForm = {
						businessName:'',
						resIds:[]
					}
					this.getroleList()
					this.addDialogVisible = true
				},
				/* 对象数组去重 */
				unique(arr) {
					const res = new Map();
					return arr.filter((arr) => !res.has(arr.value) && res.set(arr.value, 1))
				},
				async addSub(){
					const loading = this.$loading({
					  lock: true,
					  text: 'Loading',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					this.menulist.forEach((item,index)=>{
						item.children.forEach((itemc,indexc)=>{
							if(itemc.checked){
								this.addForm.resIds.push(itemc.id)
								this.addForm.resIds.push(itemc.pid)
							}
						})
					})
					this.addForm.resIds = this.addForm.resIds.filter(function(x, index,self) {
						return self.indexOf(x)===index;
					});
					const {data:res} = await this.$http.post('/sys/role/add',this.addForm)
					console.log(res)
					setTimeout(() => {
					  loading.close();
					}, 500);
					if(res.code!==200){
						return this.$message.error(res.msg)
					}else{
						this.$message.success('新增成功')
						this.addDialogVisible = false
						this.getTableList()
					}
				},
				async showEdit(editForm){
					const loading = this.$loading({
					  lock: true,
					  text: 'Loading',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					this.editForm.roleName = editForm.roleName
					this.$set(this.editForm,'id',editForm.id)
					
					this.menulist.forEach((item,index)=>{
						item.children.forEach((itemc,indexc)=>{
							itemc.checked = false
							editForm.resIds.forEach((itemf,indexf)=>{
								if(itemf == itemc.id){
									itemc.checked = true
								}
							})
						})
					})
					this.editDialogVisible = true
					setTimeout(() => {
					  loading.close();
					}, 500);
				},
				async editSub(){
					const loading = this.$loading({
					  lock: true,
					  text: 'Loading',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					this.menulist.forEach((item,index)=>{
						item.children.forEach((itemc,indexc)=>{
							if(itemc.checked){
								this.editForm.resIds.push(itemc.id)
								this.editForm.resIds.push(itemc.pid)
							}
						})
					})
					this.editForm.resIds = this.editForm.resIds.filter(function(x, index,self) {
						return self.indexOf(x)===index;
					});
					const {data:res} = await this.$http.post('/sys/role/update',this.editForm)
					console.log(res)
					setTimeout(() => {
					  loading.close();
					}, 500);
					if(res.code!==200){
						return this.$message.error(res.msg)
					}else{
						this.$message.success('修改成功')
						this.editDialogVisible = false
						this.getTableList()
						
					}
				},
				
			}
		}
</script>

<style lang="less" scoped>
	.scope-img{
		height: 50px;
		width: 50px;
	}
	.el-icon-success{
		font-size: 26px;
		color: green;
	}
	.el-icon-error{
		font-size: 26px;
		color: #d60404;
	}
	.formitem{
		display: flex;
		align-items: center;
	}
	.el-form-item{
		margin-bottom: 10px;
	}
	.inp-1{
		width: 30%;
		margin-right: 10px;
	}
	.inp-2{
		width: 20%;
	}
	.editIcon{
		width: 80px;
		height: 80px;
	}
	.avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    position: relative;
	    overflow: hidden;
	  }
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 100px;
	    height: 100px;
	    line-height: 100px;
	    text-align: center;
		border: 1px dashed #d9d9d9;
	  }
	  .avatar {
	    width: 100px;
	    height: 100px;
	    display: block;
	  }
</style>

